<script setup lang="ts">
import { ref } from 'vue';

const favoriteList = ref([
  {
    title: '小红帽历险记',
    date: '2024-01-15',
    image: 'https://images.unsplash.com/photo-1599458252573-56ae36120de1?w=800&h=400&fit=crop&q=80'
  },
  {
    title: '睡美人',
    date: '2024-01-14',
    image: 'https://images.unsplash.com/photo-1516280440614-37939bbacd81?w=400&h=300&fit=crop&q=80'
  }
]);

const hasItems = ref(true);

const readStory = (title: string) => {
  // TODO: 实现故事阅读功能
};

const unfavorite = (title: string) => {
  // TODO: 实现取消收藏功能
};

const discoverMore = () => {
  // TODO: 跳转到发现页面
};
</script>

<template>
  <div class="container mx-auto px-4 py-8">
    <!-- 收藏列表 -->
    <div class="space-y-4" v-if="hasItems">
      <div v-for="item in favoriteList" :key="item.title" class="bg-white/80 backdrop-blur-md rounded-2xl p-4 shadow-lg flex items-center space-x-4">
        <img :src="item.image" :alt="item.title" class="w-16 h-16 rounded-xl object-cover">
        <div class="flex-1">
          <h3 class="font-semibold">{{ item.title }}</h3>
          <p class="text-sm text-gray-500">收藏于：{{ item.date }}</p>
        </div>
        <div class="flex space-x-2">
          <img src="https://unpkg.com/lucide-static@latest/icons/book-open.svg" class="w-6 h-6 text-purple-600 cursor-pointer" alt="阅读" @click="readStory(item.title)">
          <img src="https://unpkg.com/lucide-static@latest/icons/heart-off.svg" class="w-6 h-6 text-red-500 cursor-pointer" alt="取消收藏" @click="unfavorite(item.title)">
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="bg-white/80 backdrop-blur-md rounded-2xl p-8 text-center">
      <img src="https://unpkg.com/lucide-static@latest/icons/heart.svg" class="w-16 h-16 mx-auto mb-4 text-gray-400" alt="空收藏">
      <p class="text-gray-500">暂无收藏的故事</p>
      <button @click="discoverMore" class="mt-4 px-6 py-2 bg-purple-600 text-white rounded-full text-sm font-medium">去发现更多故事</button>
    </div>
  </div>
</template>